<script setup lang="ts">
import { ref } from 'vue'
import type { Doctor } from '@/types/doctor'
import { getDoctors } from '@/services/doctor'
import { onShow } from '@dcloudio/uni-app'

const dataList = ref<Required<Doctor>[]>([])

// onLoad 从登录页返回时，不会执行
onShow(() => {
  list()
})

async function list() {
  dataList.value = await getDoctors()
}

function handleItemClick(id: number) {
  uni.navigateTo({
    url: './detail?id=' + id,
  })
}
</script>

<template>
  <view class="container">
    <view class="data-list">
      <view v-for="data in dataList" :key="data.id" @click="handleItemClick(data.id)">
        <view class="data-item">
          <!-- 左侧图片区域 -->
          <view class="data-item-left">
            <image :src="data.photoFront" class="data-pic"></image>
          </view>
          <!-- 右侧状态区域 -->
          <view class="data-item-right">
            <view class="item-top">
              <!-- 医生姓名 -->
              <view class="doctor-name">
                <view class="name name-item">
                  {{ data.name }}
                </view>
              </view>

              <view class="section-position">
                <view class="item">
                  {{ data.sectionOffice }}
                </view>
                <view class="item">
                  {{ data.position }}
                </view>
              </view>

              <view class="hospital">
                {{ data.hospital }}
              </view>
            </view>
            <!-- 擅长 -->
            <view class="specialty">{{ data.specialty }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.data-item {
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
  margin-bottom: 10px;
  // border-bottom: 1px solid #f0f0f0;

  .data-item-left {
    margin-right: 15px;

    .data-pic {
      width: 100px;
      height: 130px;
      display: block;
    }
  }

  .data-item-right {
    // margin-right: 10px;
    font-size: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .doctor-name {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .section-position {
      display: flex;
      margin-bottom: 5px;

      .item {
        margin-right: 10px;
      }
    }

    .specialty {
      // margin-top: 2px;
      font-size: 15px;
      color: #848484;
      // 控制文本超出2行隐藏
      //text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

  }
}
</style>
